<template>
  <div class="dashboard-container" style="margin: 30px;">
    <el-form ref="ruleForm" :model="form" :rules="rules" label-width="150px" class="demo-ruleForm">
      <el-form-item label="标题颜色" prop="title_color">
        <el-color-picker v-model="form.title_color" />
      </el-form-item>
      <el-form-item label="内容颜色" prop="title_color">
        <el-color-picker v-model="form.content_color" />
      </el-form-item>
      <el-form-item label="描述颜色" prop="title_color">
        <el-color-picker v-model="form.desc_color" />
      </el-form-item>
      <el-form-item label="按钮颜色" prop="title_color">
        <el-color-picker v-model="form.btn_color" />
      </el-form-item>
      <el-form-item label="背景图片" prop="background">
        <el-upload
          class="avatar-uploader"
          action="https://tfnfw.tfnhg.com/oss_upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="form.background" :src="form.background" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>

      </el-form-item>
      <el-form-item label="生日标题颜色" prop="title_color">
        <el-color-picker v-model="form.birthday_title_color" />
      </el-form-item>
      <el-form-item label="生日内容颜色" prop="title_color">
        <el-color-picker v-model="form.birthday_content_color" />
      </el-form-item>
      <el-form-item label="生日描述颜色" prop="title_color">
        <el-color-picker v-model="form.birthday_desc_color" />
      </el-form-item>
      <el-form-item label="生日背景图片" prop="background">
        <el-upload
          class="avatar-uploader"
          action="https://tfnfw.tfnhg.com/oss_upload"
          :show-file-list="false"
          :on-success="handleBirthdaySuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="form.birthday_bg" :src="form.birthday_bg" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>

      </el-form-item>
      <el-form-item label="二维码" prop="background">
        <el-upload
          class="avatar-uploader"
          action="https://tfnfw.tfnhg.com/oss_upload"
          :show-file-list="false"
          :on-success="handleBirthdaySuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="form.code" :src="form.code" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>

      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getDefaultApi, uploadDefault } from '@/api/main'
export default {
  data() {
    return {
      form: {
        title_color: '',
        content_color: '',
        background: '',
        desc_color: '',
        birthday_bg: '',
        birthday_title_color: '',
        birthday_content_color: '',
        birthday_desc_color: '',
        btn_color: '',
        code: ''
      },
      rules: {
        title_color: [
          { required: true, message: '颜色不能为空，请选择颜色', trigger: 'change' }
        ],
        content_color: [
          { required: true, message: '颜色不能为空，请选择颜色', trigger: 'change' }
        ],
        desc_color: [
          { required: true, message: '颜色不能为空，请选择颜色', trigger: 'change' }
        ],
        btn_color: [
          { required: true, message: '颜色不能为空，请选择颜色', trigger: 'change' }
        ],
        birthday_title_color: [
          { required: true, message: '颜色不能为空，请选择颜色', trigger: 'change' }
        ],
        birthday_content_color: [
          { required: true, message: '颜色不能为空，请选择颜色', trigger: 'change' }
        ],
        birthday_desc_color: [
          { required: true, message: '颜色不能为空，请选择颜色', trigger: 'change' }
        ],
        birthday_bg: [
          { required: true, message: '请选择上传图片', trigger: 'change' }
        ],
        background: [
          { required: true, message: '请选择上传图片', trigger: 'change' }
        ],
        code: [
          { required: true, message: '请选择上传图片', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.getDefault()
  },
  methods: {
    handleAvatarSuccess(res, file) {
      console.log(res, file)
      this.form.background = res
    },
    handleBirthdaySuccess(res, file) {
      console.log(res, file)
      this.form.birthday_bg = res
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type.split('/')[0] === 'image'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传图片文件!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    getDefault() {
      getDefaultApi().then(res => {
        this.form = res
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = this.form
          uploadDefault(data).then(res => {
            if (res.code === 200) {
              this.$message.success('信息提交成功！')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
dashboard {
    &-container {
        margin: 30px;
    }
    &-text {
        font-size: 30px;
        line-height: 46px;
    }
}
</style>
